<template>

  <div class="header" :class="[showHeader]">
    <div class="header-back" :class="[showBack]">
      <span class="iconfont">
        &#xe71b;
      </span>
    </div>
    <div class="header-search" :class="[showSearch]">
       <span class="iconfont">
        &#xe613;
      </span>
      上海海昌海洋公园
    </div>
    <router-link to="/location">
      <div class="header-city" :class="showCity">
        {{this.$store.state.city}}
        <span class="iconfont">
        &#xe6a9;
      </span>
      </div>
    </router-link>
  </div>
</template>

<script>
  export default {
    name: 'homeHeader',
    props: ['city'],
    data() {
      return {
        showHeader: '',
        showBack: '',
        showSearch: '',
        showCity: ''
      }
    },
    methods: {
      scrollChange() {
        let height = document.documentElement.scrollTop;
        //console.log(height)
        if (height > 50) {
          this.showHeader = 'showHeader';
          this.showBack = 'showBack';
          this.showSearch = 'showSearch';
          this.showCity = 'showCity'
        } else {
          this.showHeader = '';
          this.showBack = '';
          this.showSearch = '';
          this.showCity = ''
        }
      }
    },
    mounted() {
      window.addEventListener('scroll',
        this.scrollChange)
    }
  }
</script>


<style lang="stylus" scoped>

  .header
    line-height: .88rem
    text-align: center
    display: flex

  .showHeader
    background: #fff

  .header-back
    float: left
    width: .9rem

  .showBack
    background: #fff

  .header-search
    flex: 1
    height: .6rem
    line-height: .6rem
    margin-top: .2rem
    margin-left: .2rem
    margin-right: .2rem
    border-radius: .5rem
    box-shadow: 0 0 .01rem .02rem #e0e0e0

  .showSearch
    color: #aaa
    background: #eee
    box-shadow: 0 0 .01rem .02rem #c1c1c1

  .header-city
    float: right
    width: 1.4rem
    color: #000

  .showCity
    color: #000

</style>
